<template>
  <view class="page-container">
    <!-- 顶部用户信息 -->
    <view class="header">
      <text class="welcome-text">欢迎 xxxxxxxxx 用户</text>
      <view class="header-icon"></view>
    </view>

    <!-- Tab 菜单 -->
    <view class="tab-menu">
      <view
        v-for="(item, index) in tabs"
        :key="index"
        :class="['tab-item', currentTab === index ? 'active-tab' : '']"
        @tap="switchTab(index)"
      >
        {{ item }}
      </view>
    </view>

    <!-- 地图区域 -->
    <view class="map-container">
      <map
        id="map"
        :longitude="mapLongitude"
        :latitude="mapLatitude"
        :markers="markers"
        show-location
        @callouttap="onMarkerTap"
      ></map>
    </view>

    <!-- 附近服务 -->
    <view class="service-list">
      <view class="service-title">附近服务</view>
      <view
        v-for="(service, index) in services"
        :key="index"
        class="service-item"
      >
        <view class="service-info">
          <text class="service-name">{{ service.name }}</text>
          <text class="service-type">{{ service.type }}</text>
          <text class="service-price">时薪：{{ service.price }}</text>
          <text class="service-distance">{{ service.distance }}km</text>
        </view>
        <view class="service-actions">
          <button class="action-btn">维修</button>
          <button class="action-btn">砍价</button>
          <button class="action-btn" @tap="contactService(service)">联系商家</button>
        </view>
      </view>
    </view>

    <!-- 底部导航 -->
    <view class="bottom-nav">
      <view class="nav-item" @tap="navigateTo('home')">
        <text>首页</text>
      </view>
      <view class="nav-item" @tap="navigateTo('profile')">
        <text>我的</text>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      currentTab: 0, // 当前选中的 Tab
      tabs: ['非紧急', '保养', '维修'], // Tab 菜单
      mapLongitude: 121.473701, // 地图经度
      mapLatitude: 31.230416, // 地图纬度
      markers: [
        // 地图标记
        {
          id: 1,
          latitude: 31.230416,
          longitude: 121.473701,
          title: '店铺A',
        },
        {
          id: 2,
          latitude: 31.232416,
          longitude: 121.475701,
          title: '店铺B',
        },
      ],
      services: [
        // 服务商列表
        {
          name: 'XXXXXX',
          type: 'MC',
          price: '10~15$',
          distance: 20.21,
        },
        {
          name: 'XXXXXX',
          type: 'MC',
          price: '10~15$',
          distance: 20.31,
        },
      ],
    };
  },
  methods: {
    switchTab(index) {
      this.currentTab = index;
      console.log('切换到 Tab：', this.tabs[index]);
    },
    onMarkerTap(e) {
      console.log('点击了地图标记：', e.markerId);
    },
    contactService(service) {
      console.log('联系商家：', service.name);
      uni.makePhoneCall({
        phoneNumber: '123456789', // 示例电话号码
      });
    },
    navigateTo(page) {
      console.log('跳转到：', page);
      uni.navigateTo({
        url: `/${page}/${page}`, // 示例路径
      });
    },
  },
};
</script>
<style>
.page-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f3eeda;
}

.header {
  padding: 10px 15px;
  background-color: #fffbe9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-text {
  font-size: 16px;
  color: #333;
}

.header-icon {
  width: 20px;
  height: 20px;
  background-color: #ccc;
  border-radius: 50%;
}

.tab-menu {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 14px;
  color: #333;
}

.active-tab {
  color: #ff6600;
  border-bottom: 2px solid #ff6600;
}

.map-container {
  height: 200px;
  background-color: #eaeaea;
}

.service-list {
  padding: 15px;
}

.service-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}

.service-item {
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.service-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.service-name {
  font-size: 14px;
  color: #333;
}

.service-type {
  font-size: 12px;
  color: #999;
}

.service-price,
.service-distance {
  font-size: 12px;
  color: #666;
}

.service-actions {
  display: flex;
  justify-content: space-between;
}

.action-btn {
  flex: 1;
  text-align: center;
  margin: 0 5px;
  padding: 5px;
  border: 1px solid #ff6600;
  color: #ff6600;
  border-radius: 4px;
  font-size: 12px;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  display: flex;
  background-color: #fff;
  border-top: 1px solid #ddd;
}

.nav-item {
  flex: 1;
  text-align: center;
  line-height: 50px;
  font-size: 14px;
  color: #666;
}
</style>
